<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <div id="breadcrumb">
                <el-breadcrumb separator="/" style="margin-top: 20px;">
                    <el-breadcrumb-item><a href="/cai/indexTwo.html">首页</a></el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/cai/shop.html">购物车</a></el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/cai/order.html">订单信息</a></el-breadcrumb-item>
                    <el-breadcrumb-item><a href="">订单支付</a></el-breadcrumb-item>
                    <!-- <el-breadcrumb-item><a href="https://www.baidu.com">提交订单</a></el-breadcrumb-item> -->
                    <el-breadcrumb-item><a href="https://www.baidu.com"></a></el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <el-steps :active="active" finish-status="success" style="margin-top: 53px;">
                <el-step title="购物车"></el-step>
                <el-step title="订单详情"></el-step>
                <el-step title="订单支付"></el-step>
            </el-steps>
            <div class="" v-if="active===0"></div>
            <div class="" v-if="active===1"></div>
            <div class="" v-if="active===2"></div>
        </el-header>
        <el-main>
            <div style="width: 1600px; height: 750px; overflow: hidden;">
                <iframe ref="hehe" name="hehe" id="hehe" src="/cai/shopOne.html" style="width: 1650px; height: 650px; margin-top: 155px;overflow: hidden; border: none;"></iframe></div>

        </el-main>

        <el-footer style="margin-top:-105px;">
            <el-row :gutter="20">
                <el-col :span="2">
                    &nbsp;
                </el-col>
                <el-col :span="16">
                    &nbsp;
                </el-col>
                <el-col :span="2">
                    &nbsp;
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <el-button-group >
                            <el-button round icon="el-icon-arrow-left" @click="prev" v-if="active==1"
                                       style="color: #646464;">返回</el-button>
                            <el-button round @click="nextt" v-if="active==0">去结算<i
                                    class="el-icon-arrow-right el-icon--right" style="color: #646464;"></i>
                            </el-button>
                            <el-button round @click="next" v-if="active==1">支付<i
                                    class="el-icon-arrow-right el-icon--right" style="color: #646464;"></i>
                            </el-button>
                            <el-button round icon="el-icon-arrow-left" @click="prevv" v-if="active==2"
                                       style="color: #646464;">返回</el-button>
                            <el-button round @click="nextShop()" v-if="active==2">继续购物<i
                                    class="el-icon-arrow-right el-icon--right" style="color: #646464;"></i>
                            </el-button>
                        </el-button-group>
                    </div>
                </el-col>
            </el-row>
        </el-footer>


        <!-- <span>{{active}}</span> -->

    </el-container>
</div>
</body>
<script type="text/javascript">
    // window.addEventListener("message", (messageEvent) => {
    // 	app.$data.active = messageEvent.data
    // })
    var app = new Vue({
        el: "#app",
        data: {
            active: 0,
            tableData:{},
            shopCarData:[],
            totalPrice: 0,
            orderInfo:{},
            totalInfo:{
                totalPrice:0
            }
        },
        mounted(){
            window.addEventListener("message",(messageEvent)=>{
                app.tableData = messageEvent.data;
                app.shopCarData=app.tableData.selection;
                app.totalInfo.totalPrice= app.tableData.total;
            })
        },
        methods: {
            prev() {
                --app.active;
                if (app.active < 0) app.active = 0;
                javascript :history.back(-1);
            },
            prevv() {
                --app.active;
                if (app.active < 1) app.active = 1;
                javascript :history.back(-1);
            },
            next() {
                if (app.active++ > 2) app.active = 0;
                hehe.src="";

                $.post("/cai/pay/payTestOne",app.totalInfo,function (backPayData) {

                     for(var i = 0;i<app.shopCarData.length;i++){
                        app.orderInfo.gid=app.shopCarData[i].storeGoods.id;
                        app.orderInfo.num=app.shopCarData[i].num;
                         app.orderInfo.price=app.shopCarData[i].price;

                         $.post("/cai/pay/payTestOneOrder",app.orderInfo,function (backData) {
                             if (backData.code=1) {
                                 alert("aksdhf");
                             }
                             });

                     };
                    if (backPayData.code = 1001) {
                        //查找到当前页面的body，将后台返回的data替换掉他的内容
                        document.querySelector('body').innerHTML = backPayData.data;
                        //执行submit表单提交，让页面重定向，跳转到支付宝页面
                        document.forms[0].submit();
                    }
                });
            },
            nextt:function() {
                if (app.active++ > 2) app.active = 0;
                for(var i = 0;i<app.shopCarData.length;i++){
                    $.get("/cai/shop/deleteOne/"+app.shopCarData[i].id,function (backData) {

                    })
                }
                this.$refs.hehe.src="/cai/order.html";
                // this.$refs.hehe.contentWindow.tableData = app.tableData;

            },
            nextShop(){
             window.location.href=  "/cai/indexTwo.html";
            }

        }
    })
</script>
</html>
